<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>医学文献检索系统</title>
    <style>
        .st1 {
            height: 60px;
            width: 90%;

            margin-left: 30%;
            margin-top: 20px;

        }

        .st2 {
            height: 32px;
            width: 60px;
            background-color: #2ac;
            border-radius: 4px;
            margin-left: 10px;
            margin-top: 20px;
            float: left;
            color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 13px;
        }

        .chosed {
            background-color: #a00;
        }

        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
        }

        .search-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        th {
            background-color: #f2f2f2;
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        /* 样式可以根据需求进行修改 */
        nav {
            background-color: #f2f2f2;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            display: inline-block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        nav a:hover {
            background-color: #ddd;
        }

        .search-bar {
            text-align: center;
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 10px;
            width: 600px;
        }

        input[type="submit"] {
            padding: 10px 20px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
    <script>
        function m1(index, allnum, pagesize) {
            var allpage = allnum / pagesize;
            allpage = parseInt(allpage);
            allpage = allnum % 10 > 0 ? allpage + 1 : allpage;
            console.log(allpage)
            //取整
            if (index < 1) index = 1;
            if (index > allpage) index = allpage;

            var x = document.getElementById("div1");
            var h = '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ');search_page(1)">首页</div>';
            if (index > 1) {
                h += '<div class="st2" onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 1) + ')">上一页</div>';
            }
            if (index < 3 || allpage <= 5) {
                for (var i = 1; i <= allpage && i <= 5; i++) {
                    if (i == index) h += '<div class="st2 chosed" onclick="m1(' + i + ',' + allnum + ',' + pagesize + ');search_page(' + i + ')">' + i + '</div>';
                    else h += '<div class="st2" onclick="m1(' + i + ',' + allnum + ',' + pagesize + ');search_page(' + i + ')">' + i + '</div>';
                }
            } else if (index >= 3 && index <= (allpage - 2)) {
                h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 2) + ')">' + (index - 2) + '</div>';
                h += '<div class="st2"onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 1) + ')">' + (index - 1) + '</div>';
                h += '<div class="st2 chosed" onclick="m1(' + index + ',' + allnum + ',' + pagesize + ');search_page(' + (index) + ')">' + index + '</div>';
                h += '<div class="st2" onclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (index + 1) + ')">' + (index + 1) + '</div>';
                h += '<div class="st2" onclick="m1(' + (index + 2) + ',' + allnum + ',' + pagesize + ');search_page(' + (index + 2) + ')">' + (index + 2) + '</div>';

            } else if (index > (allpage - 2)) {
                h += '<div class="st2" onclick="m1(' + (index - 4) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 4) + ')">' + (index - 4) + '</div>';
                h += '<div class="st2"onclick="m1(' + (index - 3) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 3) + ')">' + (index - 3) + '</div>';
                h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ');search_page(' + (index - 2) + ')">' + (index - 2) + '</div>';
                if (index == allpage) {
                    h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (allpage - 1) + ')">' + (allpage - 1) + '</div>';
                    h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ');search_page(' + (allpage) + ')">' + allpage + '</div>';
                } else {
                    h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (allpage - 1) + ')">' + (allpage - 1) + '</div>';
                    h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ');search_page(' + (allpage) + ')">' + allpage + '</div>';
                }
            }
            if (index < allpage) {
                h += '<div class="st2" onclick=" m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ');search_page(' + (index + 1) + ')">下一页</div>';
            }
            h += '<div class="st2" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ');search_page(' + allpage + ')">尾页</div>';
            h += '<div class="st2">共' + allpage + '页</div>';
            h += '<div class="st2"><input id="pageindex" type="text" style="width:40px;height:10px;"> </div>';
            h += '<div class="st2" onclick="gopage(' + allnum + ',' + pagesize + ')">跳转</div>';
            x.innerHTML = h;
        }

        function gopage(allnum, pagesize) {
            var text = document.getElementById("pageindex").value;
            text = parseInt(text);
            m1(text, allnum, pagesize);
            search_page(text);
        }


        function getCookie(cookieName) {
            const strCookie = document.cookie
            const cookieList = strCookie.split(';')

            for (let i = 0; i < cookieList.length; i++) {
                const arr = cookieList[i].split('=')
                if (cookieName === arr[0].trim()) {
                    return arr[1]
                }
            }

            return ''
        }

        function highlight(keywords, text) {
            const index = text.indexOf(keywords);
            res = text.substring(0, index) + "<spen style='color: red'>" + keywords + "</spen>" + text.substring(index + keywords.length);
            return res;
        }

        document.addEventListener('DOMContentLoaded', function () {
            // 群组点击事件
            document.getElementById('groupLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('profileLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 通知点击事件
            document.getElementById('notificationLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 群组聊天点击事件
            document.getElementById('chatLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 校验用户是否已登录的函数
            function checkUserLoggedIn() {
                // 这里可以编写校验cookie中用户是否登录的逻辑，返回 true 或 false
                // 假设这里使用一个名为 isUserLoggedIn 的函数来校验
                return isUserLoggedIn();
            }

            // 这里是模拟的校验用户是否已登录的函数
            function isUserLoggedIn() {
                // 假设在 cookie 中有一个名为 'loggedIn' 的标识，表示用户是否已登录
                const username = getCookie('username')
                // alert(username)
                // 返回 true 表示已登录，返回 false 表示未登录
                return username !== '';

            }
        });

        function reload() {
            window.location.href = "/";
        }

        function search() {
            const username = getCookie('username')
            var searchText = $("#searchTerm").val();
            var searchWay = $("#search-way").val();
            if (searchWay == 1) {
                if (searchText.length === 0) {
                    reload();
                }
                var postQuery = {
                    searchText: searchText,
                    userName: username,
                };
                $.ajax({
                    url: "/post/searchFromEs",
                    type: "POST",
                    data: JSON.stringify(postQuery),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        console.log(response)
                        var resultList = $("#result-list");
                        var listnumber = $("#listnumber");
                        listnumber.text("查询结果为:" + response.total + "条");
                        resultList.empty();
                        //sessionStorage.setItem("result",JSON.stringify(response));
                        //var item=JSON.parse(sessionStorage.getItem("result"))
                        // console.log(item)
                        m1(response.current, response.total, response.size)
                        for (var i = 0; i < response.records.length; i++) {
                            var post = response.records[i];
                            var th1 = $("<tr></tr>");
                            th1.append($("<th></th>").text("文章标题"));
                            th1.append($("<th></th>").text("文章标签"));
                            th1.append($("<th></th>").text("操作"));
                            th1.append($("<th></th>").text("评价"));
                            resultList.append(th1);
                            var row1 = $("<tr></tr>");
                            row1.append($("<td></td>").text(post.title));
                            row1.append($("<td></td>").text(post.tags));
                            row1.append(
                                '<a href="/file/download?fileName=' + post.title + '" target="_blank"><button>下载</button></a>'
                            )
                            if (post.locator != null) {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '#page=' + post.locator.page + '&top=' + post.locator.line + '" target="_blank"><button>预览</button></a>')
                            } else {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '" target="_blank"><button>预览</button></a>')
                            }
                            if (post.isfavorite) {
                                row1.append('<a href="/file/deleteFavorite?fileName=' + post.title + '" target="_blank"><button>取消收藏</button></a>')
                            } else {
                                row1.append('<a href="/file/doFavorite?fileName=' + post.title + '" target="_blank"><button>收藏</button></a>')
                            }
                            row1.append('<a href="/post/like?fileName=' + post.title + '" target="_blank" ><button>点赞</button></a>' +
                                '<a href="/post/dislike?fileName=' + post.title + '" target="_blank" ><button>点踩</button></a>'
                            )
                            row1.append($("<td></td>").text("赞：" + post.thumbnum + "踩：" + post.dislikenum));
                            resultList.append(row1);
                            if (post.content != "") {
                                var th2 = $("<tr></tr>");
                                th2.append($("<th></th>").text("文章内容：").attr("colspan", 4));
                                resultList.append(th2);
                                var row2 = $("<tr></tr>");
                                const text = post.content;
                                const keywords = post.matchWord;
                                const res = highlight(keywords, text);
                                var td = $("<td></td>");
                                td.html(res)
                                row2.append(td.attr("colspan", 4));
                                //row2.html(res).attr("colspan",3);
                                resultList.append(row2);
                            }
                            if (post.ocrPicMsg) {
                                var th3 = $("<tr></tr>");
                                th3.append($("<th></th>").text("图片内容：").attr("colspan", 3));
                                th3.append($("<th></th>").text("操作："));
                                resultList.append(th3);
                                var row3 = $("<tr></tr>");
                                const text = post.ocrPicMsg;
                                const keywords = post.matchWord;
                                const res = highlight(keywords, text);
                                var td = $("<td></td>");
                                td.html(res)
                                row3.append(td.attr("colspan", 3));
                                row3.append('<a href="/file/previewimg?imgName=' + post.imgtitle + '" target="_blank"><button>查看原图</button></a>')
                                resultList.append(row3);
                            }
                            resultList.append("<br><br>");
                        }
                    },
                    error: function (xhr, status, error) {
                        $("#result-list").html("查询失败！");
                        $("#listnumber").text("");
                    }
                });
            } else {
                //按标签搜索
                if (searchText.length === 0) {
                    reload();
                }
                var postQuery = {
                    tags: searchText,
                    userName: username,
                };
                $.ajax({
                    url: "/post/searchByTags",
                    type: "POST",
                    data: JSON.stringify(postQuery),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        console.log(response)
                        var resultList = $("#result-list");
                        var listnumber = $("#listnumber");
                        listnumber.text("查询结果为:" + response.total + "条");
                        resultList.empty();
                        //sessionStorage.setItem("result",JSON.stringify(response));
                        //var item=JSON.parse(sessionStorage.getItem("result"))
                        // console.log(item)
                        m1(response.current, response.total, response.size)
                        for (var i = 0; i < response.records.length; i++) {
                            var post = response.records[i];
                            var th1 = $("<tr></tr>");
                            th1.append($("<th></th>").text("文章标题"));
                            th1.append($("<th></th>").text("文章标签"));
                            th1.append($("<th></th>").text("操作"));
                            th1.append($("<th></th>").text("评价"));
                            resultList.append(th1);
                            var row1 = $("<tr></tr>");
                            row1.append($("<td></td>").text(post.title));
                            row1.append($("<td></td>").text(post.tags));
                            row1.append(
                                '<a href="/file/download?fileName=' + post.title + '" target="_blank"><button>下载</button></a>'
                            )
                            if (post.locator != null) {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '#page=' + post.locator.page + '&top=' + post.locator.line + '" target="_blank"><button>预览</button></a>')
                            } else {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '" target="_blank"><button>预览</button></a>')
                            }
                            if (post.isfavorite) {
                                row1.append('<a href="/file/deleteFavorite?fileName=' + post.title + '" target="_blank"><button>取消收藏</button></a>')
                            } else {
                                row1.append('<a href="/file/doFavorite?fileName=' + post.title + '" target="_blank"><button>收藏</button></a>')
                            }
                            row1.append('<a href="/post/like?fileName=' + post.title + '" target="_blank" ><button>点赞</button></a>' +
                                '<a href="/post/dislike?fileName=' + post.title + '" target="_blank" ><button>点踩</button></a>'
                            )
                            row1.append($("<td></td>").text("赞：" + post.thumbnum + "踩：" + post.dislikenum));
                            resultList.append(row1);
                            if (post.content != "") {
                                var th2 = $("<tr></tr>");
                                th2.append($("<th></th>").text("文章内容：").attr("colspan", 4));
                                resultList.append(th2);
                                var row2 = $("<tr></tr>");
                                const content = post.content;
                                var td = $("<td></td>");
                                td.text(content)
                                row2.append(td.attr("colspan", 4));
                                resultList.append(row2);
                            }
                            resultList.append("<br><br>");
                        }
                    },
                    error: function (xhr, status, error) {
                        $("#result-list").html("查询失败！");
                        $("#listnumber").text("");
                    }
                });
            }
        }

        function search_page(current) {
            const username = getCookie('username')
            var searchText = $("#searchTerm").val();
            var searchWay = $("#search-way").val();
            if (searchWay == 1) {
                if (searchText.length === 0) {
                    reload();
                }
                var postQuery = {
                    searchText: searchText,
                    userName: username,
                    current: current
                };
                $.ajax({
                    url: "/post/searchFromEs",
                    type: "POST",
                    data: JSON.stringify(postQuery),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        var resultList = $("#result-list");
                        var listnumber = $("#listnumber");
                        listnumber.text("查询结果为:" + response.total + "条");
                        resultList.empty();
                        console.log(response)
                        //sessionStorage.setItem("result",JSON.stringify(response));
                        //var item=JSON.parse(sessionStorage.getItem("result"))
                        // console.log(item)
                        //m1(response.current,response.total,response.size)
                        for (var i = 0; i < response.records.length; i++) {
                            var post = response.records[i];
                            var th1 = $("<tr></tr>");
                            th1.append($("<th></th>").text("文章标题"));
                            th1.append($("<th></th>").text("文章标签"));
                            th1.append($("<th></th>").text("操作"));
                            th1.append($("<th></th>").text("评价"));
                            resultList.append(th1);
                            var row1 = $("<tr></tr>");
                            row1.append($("<td></td>").text(post.title));
                            row1.append($("<td></td>").text(post.tags));
                            row1.append(
                                '<a href="/file/download?fileName=' + post.title + '" target="_blank"><button>下载</button></a>'
                            )
                            if (post.locator != null) {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '#page=' + post.locator.page + '&top=' + post.locator.line + '" target="_blank"><button>预览</button></a>')
                            } else {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '" target="_blank"><button>预览</button></a>')
                            }
                            if (post.isfavorite) {
                                row1.append('<a href="/file/deleteFavorite?fileName=' + post.title + '" target="_blank"><button>取消收藏</button></a>')
                            } else {
                                row1.append('<a href="/file/doFavorite?fileName=' + post.title + '" target="_blank"><button>收藏</button></a>')
                            }
                            row1.append('<a href="/post/like?fileName=' + post.title + '" target="_blank" ><button>点赞</button></a>' +
                                '<a href="/post/dislike?fileName=' + post.title + '" target="_blank" ><button>点踩</button></a>'
                            )
                            row1.append($("<td></td>").text("赞：" + post.thumbnum + "踩：" + post.dislikenum));
                            resultList.append(row1);
                            if (post.content != "") {
                                var th2 = $("<tr></tr>");
                                th2.append($("<th></th>").text("文章内容：").attr("colspan", 4));
                                resultList.append(th2);
                                var row2 = $("<tr></tr>");
                                const text = post.content;
                                const keywords = post.matchWord;
                                const res = highlight(keywords, text);
                                var td = $("<td></td>");
                                td.html(res)
                                row2.append(td.attr("colspan", 4));
                                //row2.html(res).attr("colspan",3);
                                resultList.append(row2);
                            }
                            if (post.ocrPicMsg) {
                                var th3 = $("<tr></tr>");
                                th3.append($("<th></th>").text("图片内容：").attr("colspan", 3));
                                th3.append($("<th></th>").text("操作："));
                                resultList.append(th3);
                                var row3 = $("<tr></tr>");
                                const text = post.ocrPicMsg;
                                const keywords = post.matchWord;
                                const res = highlight(keywords, text);
                                var td = $("<td></td>");
                                td.html(res)
                                row3.append(td.attr("colspan", 3));
                                row3.append('<a href="/file/previewimg?imgName=' + post.imgtitle + '" target="_blank"><button>查看原图</button></a>')
                                resultList.append(row3);
                            }
                            resultList.append("<br><br>");
                        }
                    },
                    error: function (xhr, status, error) {
                        $("#result-list").html("查询失败！");
                        $("#listnumber").text("");
                    }
                });
            } else {
                //按标签搜索
                if (searchText.length === 0) {
                    reload();
                }
                var postQuery = {
                    tags: searchText,
                    userName: username,
                    current: current
                };
                $.ajax({
                    url: "/post/searchByTags",
                    type: "POST",
                    data: JSON.stringify(postQuery),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        console.log(response)
                        var resultList = $("#result-list");
                        var listnumber = $("#listnumber");
                        listnumber.text("查询结果为:" + response.total + "条");
                        resultList.empty();
                        //sessionStorage.setItem("result",JSON.stringify(response));
                        //var item=JSON.parse(sessionStorage.getItem("result"))
                        // console.log(item)
                        m1(response.current, response.total, response.size)
                        for (var i = 0; i < response.records.length; i++) {
                            var post = response.records[i];
                            var th1 = $("<tr></tr>");
                            th1.append($("<th></th>").text("文章标题"));
                            th1.append($("<th></th>").text("文章标签"));
                            th1.append($("<th></th>").text("操作"));
                            th1.append($("<th></th>").text("评价"));
                            resultList.append(th1);
                            var row1 = $("<tr></tr>");
                            row1.append($("<td></td>").text(post.title));
                            row1.append($("<td></td>").text(post.tags));
                            row1.append(
                                '<a href="/file/download?fileName=' + post.title + '" target="_blank"><button>下载</button></a>'
                            )
                            if (post.locator != null) {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '#page=' + post.locator.page + '&top=' + post.locator.line + '" target="_blank"><button>预览</button></a>')
                            } else {
                                row1.append('<a href="/file/preview?fileName=' + post.title + '" target="_blank"><button>预览</button></a>')
                            }
                            if (post.isfavorite) {
                                row1.append('<a href="/file/deleteFavorite?fileName=' + post.title + '" target="_blank"><button>取消收藏</button></a>')
                            } else {
                                row1.append('<a href="/file/doFavorite?fileName=' + post.title + '" target="_blank"><button>收藏</button></a>')
                            }
                            row1.append('<a href="/post/like?fileName=' + post.title + '" target="_blank" ><button>点赞</button></a>' +
                                '<a href="/post/dislike?fileName=' + post.title + '" target="_blank" ><button>点踩</button></a>'
                            )
                            row1.append($("<td></td>").text("赞：" + post.thumbnum + "踩：" + post.dislikenum));
                            resultList.append(row1);
                            if (post.content != "") {
                                var th2 = $("<tr></tr>");
                                th2.append($("<th></th>").text("文章内容：").attr("colspan", 4));
                                resultList.append(th2);
                                var row2 = $("<tr></tr>");
                                const content = post.content;
                                var td = $("<td></td>");
                                td.text(content)
                                row2.append(td.attr("colspan", 4));
                                resultList.append(row2);
                            }
                            resultList.append("<br><br>");
                        }
                    },
                    error: function (xhr, status, error) {
                        $("#result-list").html("查询失败！");
                        $("#listnumber").text("");
                    }
                });
            }
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav>
    <a href="/user/adminhome">首页</a>
    <div class="dropdown">
        <a class="dropbtn">用户管理</a>
        <div class="dropdown-content">
            <a href="/user/searchUser" id="groupLink">用户管理</a>
            <a href="/user/setting" id="chatLink">新增用户</a>
        </div>
    </div>
    <div class="dropdown">
        <a class="dropbtn">个人中心</a>
        <div class="dropdown-content">
            <a href="/page/toAdminCenterPage" id="profileLink">个人资料</a>
            <a href="/page/Exit">登出</a>
        </div>
    </div>
    <a href="/page/toDataPage">数据报表</a>
</nav>

<div class="search-bar">
    <%--    <form action="/#" method="get">--%>
    <input type="text" id="searchTerm" placeholder="请输入搜索内容...">
    <input type="submit" onclick="search()" value="搜索">
    <select id="search-way" style="height: 40px;margin-left: 3px">
        <option selected value="1">内容</option>
        <option value="2">标签</option>
    </select>
    <%--    </form>--%>
</div>
<p id="listnumber"></p>
<div class="search-container">
    <table id="result-table">
        <tbody id="result-list"></tbody>
    </table>
</div>
<div id="div1" class="st1">
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</body>
</html>

